<template>
    <div class="assets-files-wrapper">
        <a-row :gutter="24">
            <template v-for="file in showFileList" :key="file.url">
                <a-col :span="span">
                    <flexbox justify="space-between" align="center" class="assets-file-box">
                        <flexbox align="center" class="assets-file-item">
                            <PaperClipOutlined />
                            <flexbox-item class="file-info">
                                <flexbox justify="space-between" class="file-name-item" :title="file.fileName || file.name">
                                    <flexbox-item :class="file.status === 'error' ? 'error-color' : 'primary-color'">
                                        <flexbox @click="download(file)">
                                            <HToolTip :title="getFileName(file.fileName || file.name)">
                                                <div class="title-cont-item" ref="titleContItem">
                                                    {{ getFileName(file.fileName || file.name) }}
                                                </div>
                                            </HToolTip>
                                            <div>{{ `.${getFileType(file.fileName || file.name)}` }}</div>
                                        </flexbox>
                                    </flexbox-item>
                                    <div class="assets-file-icon">
                                        <ZoomInOutlined class="delete-icon" @click.stop="preview(file)" v-if="file.status !== 'uploading'" />
                                        <CloseOutlined class="delete-icon" @click.stop="remove(file)" v-if="file.status !== 'uploading'" />
                                    </div>
                                </flexbox>
                                <a-progress v-if="file.percent && file.percent !== 100 && file.status !== 'done'" class="progress-bar" :percent="file.percent || 0" :strokeWidth="2" :show-info="false" :status="file.status === 'error' ? 'exception' : 'active'" />
                            </flexbox-item>
                        </flexbox>
                    </flexbox>
                </a-col>
            </template>
        </a-row>
        <a class="more-text" v-if="showFileList.length !== fileList.length" @click="setShowMore">
            <my-icon type="iconzhankai" />
            <span class="text">展开更多</span>
        </a>
    </div>
</template>

<script lang="ts">
import HToolTip from '@/components/HToolTip/index.vue';
import { PaperClipOutlined, CloseOutlined, ZoomInOutlined } from '@ant-design/icons-vue';
import { FileItem } from '@/types';
import { getFileType, getFileName } from '@/utils/file/file';
import { defineComponent, PropType, ref, unref, computed } from 'vue';
export default defineComponent({
    components: {
        PaperClipOutlined,
        CloseOutlined,
        ZoomInOutlined,
        HToolTip
    },
    props: {
        fileList: {
            type: Array as PropType<FileItem[]>,
            default: () => []
        },
        span: {
            type: Number,
            default: 12
        },
        max: {
            type: Number,
            default: 0
        }
    },
    emits: ['download', 'remove', 'preview'],
    setup(props, { emit }) {
        const showMore = ref(false);
        const showFileList = computed(() => {
            const { fileList, max } = props;
            if (max) {
                if (fileList.length >= max) {
                    return unref(showMore) ? fileList : fileList.slice(0, max);
                } else {
                    return fileList;
                }
            } else {
                return fileList;
            }
        });
        const setShowMore = () => {
            showMore.value = true;
        };
        const download = (file: FileItem) => {
            emit('download', file);
        };
        const remove = (file: FileItem) => {
            emit('remove', file);
        };
        const preview = (file: FileItem) => {
            emit('preview', file);
        };
        return {
            showMore,
            showFileList,
            getFileType,
            getFileName,
            setShowMore,
            download,
            remove,
            preview
        };
    }
});
</script>

<style scoped lang="less">
.assets-files-wrapper {
    width: 100%;

    .file-icon {
        font-size: 18px;
    }
    .delete-icon {
        font-size: 16px;
        color: rgba(0, 0, 0, 0.45);
    }
    .assets-file-box {
        margin-bottom: 8px;
        line-height: normal;
        .assets-file-item {
            flex: 0 0 90%;
            padding: 5px 10px;
            cursor: pointer;
        }
        .file-info {
            position: relative;
            margin-left: 8px;
            font-size: 14px;
            .file-name-item {
                .title-cont-item {
                    max-width: 200px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
            }
            .progress-bar {
                position: absolute;
                left: 0;
                top: 8px;
            }
            .assets-file-icon {
                margin-left: 8px;
                .anticon {
                    font-size: 12px;
                    &:hover {
                        color: #0064ff;
                    }
                }
                .anticon + .anticon {
                    margin-left: 8px;
                }
            }
        }
    }
    .more-text {
        padding: 5px 10px;
        font-size: 12px;
        span.text {
            margin-left: 8px;
        }
    }
}
</style>
